import userApi from '@/api/auth/userApi'
import page from '@/mixins/page'

export default {
  name: 'index',
  mixins: [page],
  data () {
    return {
      // 参数
      params: {
        username: '',
        name: '',
      },

      // 表单弹窗信息
      formDialog: {
        loading: false,
        title: '',
        state: '',
        visible: false,
      },
      // 表单数据
      formData: {
        name: '',
        username: '',
      },
      detail: {
        visible: false,
        title: '详情',
        data: {},
      },
      rules: {
        name: {required: true, message: '请输入', trigger: 'blur'},
        username: {required: true, message: '请输入', trigger: 'blur'},
      },
    }
  },
  methods: {
    // 查询 action 指的是各行为
    page ({action}) {
      this.table.loading = true
      this.$rq.query(userApi.url, {
        ...this.params,
        ...this.sorting,
        pageSize: this.pagination.pageSize,
        pageOn: this.pagination.pageOn
      }).then(res => {
        if (res.data && Array.isArray(res.data.rows) && res.data.rows.length) {
          this.pagination.total = res.data.total
          this.table.data = res.data.rows
        } else {
          this.total = 0
          this.table.data = []
        }
      }).finally(() => {
        // 无论失败还是成功, 都执行的操作
        this.table.loading = false
      })
    },
    // 新增
    handleInsert () {
      this.formReset()
      this.formDialog.visible = true
      this.formDialog.title = '新增'
      this.formDialog.state = 'insert'
    },
    formReset () {
      if (this.$refs.form) {
        this.$refs.form.clearValidate()
        this.$refs.form.resetFields()
      }
    },
    formSet (data) {
      this.formData.name = data.name
      this.formData.username = data.username
    },
    // 编辑
    handleEdit ({row}) {
      this.formReset()
      this.formSet(row)
      this.$nextTick(() => {
        this.formDialog.title = '修改'
        this.formDialog.state = 'edit'
        this.formDialog.visible = true
      })
    },
    // 删除(批量)
    handleDel () {
      if (this.table.selectionRows.length) {
        let ids = this.table.selectionRows.map(e => e.id)
        this.$confirm('确认删除?', {
          title: '提示',
          confirmButtonText: '删除',
          type: 'warning',
          beforeClose: (action, instance, done) => {
            if (action == 'confirm') {
              instance.confirmButtonLoading = true
              instance.confirmButtonText = '执行中...'
              this.$rq.deleteByIds(userApi.url, ids).then(res => {
                this.$message.success('删除成功')
                this.page()
              }).finally(() => {
                done()
                // instance.confirmButtonLoading = false;
              })
            } else {
              done()
            }
          }
        })
      } else {
        this.$message.warning('请至少选择一行')
      }
    },
    formSave () {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.formDialog.state === 'insert') {
            this.formDialog.loading = true
            this.$rq.insert(userApi.url, this.formData).then(res => {
              this.formDialog.visible = false
              this.page()
            }).finally(() => {
              this.formDialog.loading = false
            })
          } else if (this.formDialog.state === 'edit') {
            this.formDialog.loading = true
            this.$rq.updateById(userApi.url, this.formData).then(res => {
              this.formDialog.visible = false
              this.page()
            }).finally(() => {
              this.formDialog.loading = false
            })
          }
        }
      })
    },
    // 详情
    handleDetail ({row, column, $index}) {
      this.detail.data = row
      this.detail.visible = true
    },
    // 关闭详情
    detailClose () {
      this.detail.visible = false
    },
    // 关闭表单
    formClose () {
      this.formDialog.visible = false
    }
  },
  mounted () {
    this.$el.addEventListener('keyup', function (event){
      console.log(event, event.keyCode)
    })
    this.page()
  }
}
